<template>
  <div class="container booking-delete">
    <div class="delete-form">
      <div class="result clearfix">
        <div class="left">咨询结果：</div>
        <div class="right">
          <Icon type="ios-arrow-right" class="select-icon"></Icon>
          <cube-select
            v-model="bookingResult"
            @change="bookingResultChange"
            :options="appointment_type==10?appointmenttype_List:(order_type>3?Options_allmoney:Options_normal)"
            title="咨询结果"
            placeholder
          ></cube-select>
        </div>
      </div>
      <div class="result clearfix" v-if="order_type>3&&bookingResult==11">
        <div class="left">选择时间：</div>
        <div class="right">
          <Icon type="ios-arrow-right" class="select-icon"></Icon>
          <cube-button @click="selectTime" class="time-btn"></cube-button>
          <span class="orderDate">{{orderDate}}</span>
        </div>
      </div>

      <div class="result clearfix" v-if="bookingResult!=6 && bookingResult!=18 && bookingResult!=19 && bookingResult!=20 && bookingResult!=21">
        <div class="left">咨询医生：</div>
        <div class="right">
          <Icon type="ios-arrow-right" class="select-icon"></Icon>
          <cube-select v-model="doc" :options="doc_arr" title="咨询医生" placeholder></cube-select>
        </div>
      </div>

      <div class="result clearfix" v-if="bookingResult==16">
        <div class="left">定金金额：</div>
        <div class="right">
          <input type="tel" class="money" maxlength="9" v-model="money" />
        </div>
      </div>

      <div class="result clearfix" v-if="sd_show">
        <!-- <div class="left" v-if="bookingResult==12">升&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单：</div> -->
        <div class="left">创建流水单：</div>

        <div class="right">
          <cube-radio-group v-model="is_sd" :options="options" :horizontal="true" />
        </div>
      </div>

      <!-- <div class="result clearfix" v-if="sd_show && bookingResult==12" style="border-bottom: none">
        <p class="levelMsg">注：选择是，表示消费原项目，并且添加新项目； 选择否，表示仅消费原项目。</p>
      </div> -->

      <!-- 管家1.8需求新增八个表单  -->
      <div class="result clearfix" v-if="[1,2,4,14,16].indexOf(bookingResult) != -1">
        <div class="left">咨询项目：</div>
        <div class="right">
          <input
            type="text"
            class="project"
            :maxlength="100"
            v-model="consult_project"
            placeholder="请填写咨询项目"
          />
        </div>
      </div>

      <div class="result clearfix" v-if="[1,2,4,14,16].indexOf(bookingResult) != -1">
        <div class="left">项目报价：</div>
        <div class="right">
          <input
            type="text"
            class="project"
            :maxlength="100"
            v-model="quote_price"
            placeholder="请填写项目报价"
          />
        </div>
      </div>

      <div class="result clearfix" v-if="[1,2].indexOf(bookingResult) != -1">
        <div class="left">未成交原因：</div>
        <div class="right">
          <input
            type="text"
            class="project"
            :maxlength="100"
            v-model="no_deal_reason"
            placeholder="请填写未成交原因"
          />
        </div>
      </div>

      <div class="result clearfix" v-if="bookingResult == 4">
        <div class="left">铺垫项目：</div>
        <div class="right">
          <input
            type="text"
            class="project"
            :maxlength="100"
            v-model="bedding_project"
            placeholder="请填写铺垫项目"
          />
        </div>
      </div>

      <div class="result clearfix" v-if="bookingResult == 4">
        <div class="left">铺垫理由：</div>
        <div class="right">
          <input
            type="text"
            class="project"
            :maxlength="100"
            v-model="bedding_reason"
            placeholder="请填写铺垫项目"
          />
        </div>
      </div>

      <div class="result clearfix" v-if="bookingResult == 16">
        <div class="left">未全款原因：</div>
        <div class="right">
          <input
            type="text"
            class="project"
            :maxlength="100"
            v-model="no_all_price_reason"
            placeholder="请填写未全款原因"
          />
        </div>
      </div>

      <div class="result clearfix" v-if="bookingResult == 6">
        <div class="left">未到院原因：</div>
        <div class="right">
          <input
            type="text"
            class="project"
            :maxlength="100"
            v-model="no_go_reason"
            placeholder="请填写未到院原因"
          />
        </div>
      </div>

      <div class="result clearfix" v-if="[1,2,4,14,16,18,19,20,21].indexOf(bookingResult) != -1">
        <div class="left">跟进建议：</div>
        <div class="right">
          <input
            type="text"
            class="project"
            :maxlength="100"
            v-model="follow_advice"
            placeholder="请填写跟进建议"
          />
        </div>
      </div>
      <div class="result clearfix" v-if="appointment_type ==10" >
        <div class="left">跟进建议：</div>
        <div class="right">
          <input
            type="text"
            class="project"
            :maxlength="100"
            v-model="appointment_type_text"
            placeholder="请填写跟进建议(非必填)"
          />
        </div>
      </div>

      <div class="remark" v-if="[5,12,14,17].indexOf(bookingResult) != -1">
        <div class="left">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</div>
        <div class="right">
          <cube-textarea v-model="remarkContent" placeholder :maxlength="255"></cube-textarea>
        </div>
      </div>
    </div>
    <!-- showToast 提交弹框确认方法-->
    <button class="submit-btn" @click="deleteBooking">提&nbsp;&nbsp;&nbsp;交</button>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { MessageBox } from "mint-ui";
import api from "../../assets/js/api";
export default {
  data() {
    return {
      bookingResult: "",
      remarkContent: "",
      Options_normal: [  //非全款
        { text: "仅咨询 ，无意向", value: 1 },
        { text: "有意向，客户在考虑", value: 2 },
        //签订合同并付款 中文描述修改
        { text: "已交全款，未做项目", value: 4 },
        { text: "完成医美项目", value: 5 },
        { text: "客户未到院", value: 6 },
        { text: "客户已交定金", value: 16 },
        { text: "体验活动，且不关联流水单", value: 18 },
        { text: "复查", value: 19 },
        { text: "活动核销", value: 21 },
        { text: "其他", value: 20 },
        // { text: "邀请有礼", value: 22 }
      ],
      Options_allmoney: [  //全款
        // { text: "更改预约时间", value: 11 },
        { text: "签订合同并完成项目", value: 12 },
        { text: "客户不消费，申请退款", value: 17 },
        // { text: "定金全额补", value: 2020 },
        { text: "其他", value: 14 },       
      ],
      appointmenttype_List:[
        { text: "邀请有礼核销", value: 22 },
        { text: "客户未到院", value: 6 }
      ],
      appointment_type_text:"",
      order_type: "",
      order_id: "",
      order_sn: "",
      orderDate: "", // 时间选择
      hospital_id: 0,
      doc_arr: [],
      doc: "",
      money: "",

      options: [
        {
          label: "是",
          value: 1
        },
        {
          label: "否",
          value: 2
        }
      ],

      is_sd: 0, //默认升单
      sd_show: 0, //默认不显示升单

      //表单新增几个字段
      consult_project: "",
      quote_price: "",
      no_deal_reason: "",
      follow_advice: "",
      bedding_project: "",
      bedding_reason: "",
      no_all_price_reason: "",
      no_go_reason: "",
      appointment_type:""
    };
  },
  methods: {
    showToast() {
      MessageBox.confirm("提交后将自动退款给用户 确定提交？", "")
        .then(res => {
          this.deleteBooking();
        })
        .catch(res => {
          console.log("失败", res);
        });
    },
    deleteBooking() {
      // console.log(123,this.is_sd,this.bookingResult)
      //     return
      let load = this.loading("加载中");
      load.show();

      //咨询原因必填
      if (!this.bookingResult) {
        load.hide();
        Toast({
          message: "请选择咨询结果",
          position: "bottom",
          duration: 2000
        });
        return false;
      }

      var resulrCode = [2, 4, 5, 12]; //12为全款项目
      //拦截升单选择  必须选择升单的
      if (this.is_sd == 0 && resulrCode.includes(this.bookingResult)) {
        load.hide();
        Toast({
          message: "请选择是否升单",
          position: "bottom",
          duration: 2000
        });
        return false;
      }

      var needRemark = [5, 12, 17, 14];
      //咨询备注必填 (1.8.1版本此字段调整非必填)
      if (!this.remarkContent && needRemark.includes(this.bookingResult)) {
        load.hide();
        Toast({
          message: "备注不可以为空",
          position: "bottom",
          duration: 2000
        });
        return false;
      }

      //拦截判断
      if (this.order_type <= 3) {
        //普通项目

        //交定金的判断
        if (this.bookingResult == 16) {
          if (!this.money.trim()) {
            load.hide();
            Toast({
              message: "请输入定金金额",
              position: "bottom",
              duration: 2000
            });
            return false;
          }

          if (this.money - 0 <= 0) {
            load.hide();
            Toast({
              message: "定金金额格式错误",
              position: "bottom",
              duration: 2000
            });
            return false;
          }
        }
      } else {
        //全款项目
        if (this.bookingResult == 11 && this.orderDate == "") {
          load.hide();
          Toast({
            message: "请选择时间",
            position: "bottom",
            duration: 2000
          });
          return false;
        }
      }
      if(this.appointment_type == 10){
        this.remarkContent = this.appointment_type_text
      }
      //  这里返回了...................................................................................................
      //数据提交
      this.axios
        .post("/api/butler/order_close", {
          order_id: this.order_id,
          consult: this.bookingResult,
          remark: this.remarkContent,
          doctor_id: this.doc,
          deposit: this.money,
          is_sd: this.is_sd,
          date: this.orderDate,
          //管家1.8.1新增八个字段!
          consult_project: this.consult_project,
          quote_price: this.quote_price,
          no_deal_reason: this.no_deal_reason,
          follow_advice: this.follow_advice,
          bedding_project: this.bedding_project,
          bedding_reason: this.bedding_reason,
          no_all_price_reason: this.no_all_price_reason,
          no_go_reason: this.no_go_reason
        })
        .then(response => {
          let res = response.data;
          load.hide();

          if (res.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          }

          if (res.code != 200) {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 2000
            });
            return false;
          }

          Toast({
            message: res.msg,
            position: "bottom",
            duration: 2000
          });

          // 当选择活动核销的时候，提交直接跳转主页
          if(this.bookingResult == 21 || this.bookingResult == 22){
            this.$router.push({ path: "/indexPage" });
            window.location.reload();
            return
          }
          
          if (this.is_sd != 1) {
            if (this.bookingResult == 12 && this.is_sd == 2) {
              this.$router.push({ path: "/bookingDetail:" + this.order_id });
            } else {
              this.$router.push({ path: "/indexPage" });
              //this.$router.go(-2);
            }
            window.location.reload();
          } else {
            this.$router.push({ path: "/createdBill:" + this.order_id });
          }
        })
        .catch(error => {
          load.hide();
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },

    selectTime(date, selectedVal, selectedText) {
      if (!this.dateTimePicker) {
        this.dateTimePicker = this.$createDatePicker({
          title: "请选择刷卡时间",
          min: new Date(),
          max: new Date(
            new Date().getFullYear() + 1,
            new Date().getMonth(),
            new Date().getDate(),
            24,
            24,
            24
          ),
          value: new Date(),
          columnCount: 6,
          onSelect: (date, selectedVal, selectedText) => {
            let timeArr = selectedVal,
              tostring;
            timeArr[1] = timeArr[1] - 0 < 10 ? "0" + timeArr[1] : timeArr[1];
            timeArr[2] = timeArr[2] - 0 < 10 ? "0" + timeArr[2] : timeArr[2];
            timeArr[3] = timeArr[3] - 0 < 10 ? "0" + timeArr[3] : timeArr[3];
            timeArr[4] = timeArr[4] - 0 < 10 ? "0" + timeArr[4] : timeArr[4];
            timeArr[5] = timeArr[5] - 0 < 10 ? "0" + timeArr[5] : timeArr[5];
            tostring =
              timeArr[0] +
              "-" +
              timeArr[1] +
              "-" +
              timeArr[2] +
              " " +
              timeArr[3] +
              ":" +
              timeArr[4] +
              ":" +
              timeArr[5];
            this.orderDate = tostring;
          },
          onCancel: this.cancelTime
        });
      }
      this.dateTimePicker.show();
    },

    get_doctor() {
      this.axios
        .post("api/butler/doctor/list", {
          hospital: this.hospital_id
        })
        .then(result => {
          let res = result.data;
          if (res.code == 200) {
            let arr = res.data.doctors || [];
            arr.forEach(item => {
              item.text = item.name;
              item.value = item.id;
            });
            this.doc_arr = arr;
          } else {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 2000
            });
          }
        })
        .catch(err => {
          console.log(err);
          Toast({
            message: "服务器出错啦",
            position: "bottom",
            duration: 2000
          });
        });
    },

    //是否显示选择升单框
    bookingResultChange(value, index, text) {
      console.log("change", value, index, text);
      this.sd_show = 0;
      this.is_sd = 0;
      this.options = [
        {
          label: "是",
          value: 1
        },
        {
          label: "否",
          value: 2
        }
      ];

      if (value == 2 || value == 12 || value == 4 || value == 5) {
        this.sd_show = 1;
        this.is_sd = 1;
        console.log(this.is_sd);

        if (value == 4 || value == 5) {
          this.is_sd = 1;
          this.options = [
            {
              label: "是",
              value: 1
            },
            {
              label: "否",
              value: 2,
              disabled: true
            }
          ];
        }
      }
    }
  },
   beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; 
        next();
  },

  mounted() {
    console.log(this.sd_show);
    document.title = "关闭预约单";
    this.axios.defaults.baseURL = api;
    let url_data = location.hash.split(":")[1];
    this.order_id = url_data.split("_")[0];
    this.order_type = url_data.split("_")[1];
    this.hospital_id = url_data.split("_")[2];
    this.order_sn = url_data.split("_")[3];
    this.appointment_type = url_data.split("_")[4];
    console.log(this.appointment_type)
    this.get_doctor();
  }
};
</script>

<style lang="less" scoped>

.container {
  padding: 0 15px;
  .delete-form {
    .result {
      min-height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
      display: flex;
      .left {
        flex: 4;
        letter-spacing: 1px;
      }
      .right {
        flex: 7;

        input {
          width: 95%;
        }
      }
    }
    .result {
      .right {
        position: relative;
        .cube-select {
          &::after {
            border: none !important;
          }
        }
        .select-icon {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 20px;
          z-index: 10;
        }
      }
      .money {
        width: 100%;
        height: 100%;
        background-color: transparent;
      }
    }
    .select-icon {
      display: block;
      font-size: 20px;
      position: absolute !important;
      right: 20px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      z-index: 99;
    }
    .orderDate {
      width: 80%;
      height: 50px;
      line-height: 50x;
      display: block;
      position: absolute;
      top: 0;
      left: 0px;
    }
    .cube-btn {
      height: 50px !important;
      line-height: 20px !important;
      position: absolute;
      background: transparent !important;
      color: #666 !important;
      text-align: left !important;
      padding: 0 !important;
      font-size: 17px;
      z-index: 99;
    }
    .cube-select {
      padding: 0;
      line-height: 50px;
    }
    .remark {
      .left {
        margin: 15px 0;
      }
      .right {
        height: 30%;
        .cube-textarea-wrapper {
          min-height: 120px;
          border: 1px solid rgba(204, 204, 204, 0.2999);
          // &::after {
          //   // border: none !important;
          // }
        }
      }
    }
  }
  .submit-btn {
    width: 280px;
    height: 48px;
    display: block;
    background: linear-gradient(
      180deg,
      rgba(255, 221, 221, 1),
      rgba(255, 131, 166, 1)
    );
    border-radius: 24px;
    color: #fff;
    font-size: 17px;
    margin: 60px auto;
  }
}
</style>

<style lang="less">
.booking-delete {
  .cube-select-icon {
    display: none;
  }
  .cube-radio-group[data-horz="true"] .cube-radio-wrap{
  justify-content: flex-start;
}
}

.cube-radio-group[data-horz="true"]::after {
  border: none !important;
}

.cube-radio_selected .cube-radio-ui {
  background-color: rgba(255, 137, 169, 1) !important;
}

.levelMsg {
  margin-top: 9px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 126, 27, 1);
  line-height: 22px;
}
</style>
<style scope="scope">
.mint-msgbox-btn {
  width: auto;
  height: auto;
  background: #fff;
  margin: none;
  border-radius: 0;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
}
.mint-msgbox-btn.mint-msgbox-confirm {
  color: #ff383e;
}
.mint-msgbox {
  width: 260px;
  height: 158px;
  box-sizing: border-box;
}
.mint-msgbox-message {
  height: 116px;
  color: #333333;
  line-height: 20px;
  font-size: 14px;
  box-sizing: border-box;
  padding: 38px 45px;
}
.mint-msgbox-content {
  padding: 0;
}
</style>


